#include("/common/_layout.html")
#@layout()
#define layoutHead()
	<link rel="stylesheet" href="/static/other/FlexoCalendar/FlexoCalendar.css">
	<title>排课管理</title>
	<style>
	.course-plan-table{ }	
	.course-plan-table th,td{ text-align: center;}
	.course-plan-td{ height: 60px;}	
	</style>
#end
#define layoutBody()
	<body>
		<div class="wrap-container clearfix">
				<div class="column-content-detail">
					<div class="layui-form" action="" >
						<div class="layui-form-item" style="text-align: center;">
							<div class="layui-inline tool-btn">
							</div>
							<div class="layui-inline">
								<select id="class_id" name="class_id" lay-filter="class_id">
									<option value="">请选择班级</option>
								</select>
							</div>
							<div class="layui-inline">
								<button class="layui-btn layui-btn-small layui-btn-primary hidden-xs" onclick="window.location.reload()">刷新班级</button>
							</div>
							<div class="layui-inline" style="float: right; margin-right: 80px;">
								<div class="layui-inline" style="margin-right:0px; display:;">
									<input type="text" id="txt_week" name="txt_week" lay-filter="txt_week" placeholder="请选择日期" class="layui-input" style="width:230px;">
									<input type="hidden" id="start_date">
									<input type="hidden" id="end_date">
									<div id="divweek" style="display: none;">
										<div class="calendar-wrapper">
											<div id="calendar-weekly"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-form" id="table-list">
						<table class="layui-table course-plan-table" lay-even>
							<colgroup>
								<col width="50">
								<col>
								<col>
								<col>
								<col>
								<col>
								<col>
							</colgroup>
							<thead>
								<tr>
									<th></th>
									<th id="th1" week-text="周一"></th>
									<th id="th2" week-text="周二"></th>
									<th id="th3" week-text="周三"></th>
									<th id="th4" week-text="周四"></th>
									<th id="th5" week-text="周五"></th>
									<th id="th6" week-text="周六"></th>
									<th id="th7" week-text="周日"></th>
								</tr>
							</thead>
							<tbody id="listTbody">
							</tbody>
						</table>
					</div>
					<div class="layui-form" id="class-table" style="display:none;">
						<div style="text-align: center; margin: 10px;">
							<button class="layui-btn  layui-btn-mini layui-btn-primary btn-del-curclass">
								删除本节课程
							</button>
						</div>
						<table class="layui-table course-plan-table" lay-even>
							<colgroup>
								<col width="50">
								<col>
								<col>
								<col>
								<col>
							</colgroup>
							<thead>
								<tr>
									<th>ID</th>
									<th>课程名称</th>
									<th>年级</th>
									<th>创建时间</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="classTbody">
							</tbody>
						</table>
						<div class="page-wrap">
							<div id="divPager"></div>
						</div>
					</div>
				</div>
		</div>
		<!-- #[[ -->
		<script id="tplClassTbody" type="text/html">
			{{#  layui.each(d.rows, function(index, item){  }}
				<tr id="tr_course_{{ item.course_id }}">
					<td class="hidden-xs">{{ item.course_id }}</td>
					<td style="text-align: left;">{{ item.course_name }}
						<button class="layui-btn layui-btn-mini layui-btn-normal showSubBtn" course-id="{{ item.course_id }}" course-name="{{ item.course_name }}">+</button>
					</td>
					<td class="hidden-xs">{{ item.grade_name }}</td>
					<td class="hidden-xs">{{ item.add_time }}</td>
					<td class="hidden-xs">
						<button class="layui-btn  layui-btn-mini layui-btn-primary sel-btn" course-id="{{ item.course_id }}" course_name="{{ item.course_name }}" style="display:none;">选择</button>
					</td>
				</tr>
			{{#  }); }}
			{{#  if(d.rows.length === 0){ }}
			  无数据
			{{#  } }} 
		</script>
		<!-- ]]# -->
		<script type="text/javascript" src="/static/other/FlexoCalendar/FlexoCalendar.js"></script>
		<script type="text/javascript">
		var initno = 0;
		var page_jump_num = 0;
		var curr_plan_td_id = "";
		
		layui.use(['layer', 'laypage', 'laytpl', 'form'], function(){
			var laypage = layui.laypage
			,layer = layui.layer
			,laytpl = layui.laytpl;
			var form = layui.form();
			// 周历初始化
			$("#calendar-weekly").flexoCalendar({type:'weekly',today:true, 
				// 日历切换事件
				onselect: function(date){
					var stext = $('td[data-time="'+date+'"]').text();
					$('#txt_week').val(stext);
					var arr1 = date.split(',');
					$('#start_date').val(arr1[0]);
					$('#end_date').val(arr1[1]);
					layer.closeAll();
					// 初始化课程表
					initCourseTable();
					// 获取当前班级课程表
					getCoursePlanList();
				},
			});
			
			// 周历初始化事件
			function selweek_init(){
				var curtd = $('td.current-week');
				var stext = curtd.text();
				var sdate = curtd.attr('data-time');
				$('#txt_week').val(stext);
				var arr1 = sdate.split(',');
				$('#start_date').val(arr1[0]);
				$('#end_date').val(arr1[1]);
			}
			// 日期输入框点击事件, 弹出周历
			$('#txt_week').click(function(){
				layer.open({
					title: false,
					shade: 0,
					fixed: false,
					type: 1,
					closeBtn: 0,
					offset: ['40px','0px'],
					content: $('#divweek')
				});
			});  
			
			// 初始化,课程表
			function initCourseTable(){
				var startdate = new Date($('#start_date').val());
				var shtml = '';
				for(var i = 1; i <= 7; i++){
					$('#th'+i).text(formatDate(startdate, 'M月d日') +' '+ $('#th'+i).attr('week-text'));
					
					var row_starttime = new Date($('#start_date').val());
					shtml += '<tr><td>'+i+'</td>';
					for(var j=1; j<= 7; j++){
						shtml += '<td id="td'+i+'_'+j+'" data-sort="'+i+'" data-time="'+formatDate(row_starttime,'yyyy-MM-dd')+'" class="course-plan-td"></td>';
						row_starttime.setTime(row_starttime.getTime() + 1000*60*60*24);
					}
					shtml += '</tr>';
					
					var targetday_milliseconds = startdate.getTime() + 1000*60*60*24;
					startdate.setTime(targetday_milliseconds); //注意，这行是关键代码
				}
				$('#listTbody').html(shtml);
				// 单元格点击事件
				$('td.course-plan-td').click(function(){ 
					curr_plan_td_id = $(this).attr('id');
					showClassTable();
				});
			}
			// 弹出课程选择层
			function showClassTable(){
				var classid = $('#class_id').val();
				var startval = $('#start_date').val();
				if (classid==null || classid=="undefined" || classid == ""){
					layer.msg('请先选择班级！');
					return ;
				}else if (startval==null || startval=="undefined" || startval == ""){
					layer.msg('请先选择日期！');
					return ;
				}
				layer.open({
					title: '请选择课程',
					type: 1,
					area: '800px',
					offset: '10px',
					content: $('#class-table')
				});
				getCoursePage(1);
			}
			// 获取课程资源
			function getCoursePage(pageNo){
				var surl = "/api/eduorg/course/getPage?pageNo=" + pageNo + "&pageSize=" + global_pagesize+ "&state=1&poid=1";
				sendPost(surl, null, function(res){
					//console.log(res);
					// 首页，渲染分页
					if (page_jump_num == 0){
						renderPage(res.pageData.totalRow);
					}
					if (res.pageData.list.length>0){
						var jdata = {rows: res.pageData.list };
						renderTable(jdata);
					}
				});
			}
			// 课程资源模板
			function renderTable(listData){
				var getTpl = document.getElementById('tplClassTbody').innerHTML;
				laytpl(getTpl).render(listData, function(html){
					document.getElementById('classTbody').innerHTML = html;
				});
			}
			// 课程资源翻页 render pager
			function renderPage(totalPage){
				if (totalPage>0){
					page_jump_num = 0;
					laypage.render({
						elem: 'divPager'
						,count: totalPage
						,limit: global_pagesize
						,jump: function(obj){
							//首次不执行
							if(page_jump_num>0){
								getPageData(obj.curr);
							}
							page_jump_num++;
						}
					});
				}
			}
			// 选择课程资源,保存数据
			$('#class-table').on('click', '.btn-del-curclass', function() {
				// 删除本节课程
				sendPost("/api/eduorg/plancourse/del", {
					class_id: $('#class_id').val(),
					course_date: $('#'+curr_plan_td_id).attr('data-time'),
					plan_sort: $('#'+curr_plan_td_id).attr('data-sort'),
				}, function(res){
					//console.log(res);
					layer.alert(res.msg, {
						title: '信息提示'
					}, function(idx){
						if (res.code==200){
							$('#'+curr_plan_td_id).html('');
							layer.closeAll();
						}
						layer.close(idx);
					});
				});
				return false;
			});
			$('#class-table').on('click', '.sel-btn', function() {
				var course_name = '【'+$(this).attr('course-name') + '】'+ formatNullValue($(this).attr('classes-name'));
				// 保存课程表
				sendPost("/api/eduorg/plancourse/save", {
					class_id: $('#class_id').val(),
					course_date: $('#'+curr_plan_td_id).attr('data-time'),
					plan_sort: $('#'+curr_plan_td_id).attr('data-sort'),
					course_id: $(this).attr('course-id'),
					classes_id: $(this).attr('classes-id'),
				}, function(res){
					//console.log(res);
					layer.alert(res.msg, {
						title: '信息提示'
					}, function(idx){
						if (res.code==200){
							$('#'+curr_plan_td_id).html(course_name);
							layer.closeAll();
						}
						layer.close(idx);
					});
				});
				return false;
			})
			// 获取单个课程和课节
			$('#class-table').on('click', '.showSubBtn', function() {
				var _this = $(this);
				var courseid = _this.attr('course-id');
				var coursename = _this.attr('course-name');
				var childs = $('.course-classes-tr-'+courseid+'');
				var intxt = _this.html();
				if(intxt == '+'){ 
					_this.html('-'); 
				}else{ 
					_this.html('+');
					childs.hide();
					return;
				}
				if (childs.length > 0){
					childs.show();
					return;
				}
				sendPost("/api/eduorg/course/getOne", { id: courseid, idesc: 1 }, function(res){
					//console.log(res);
					if (res.hasOwnProperty('listclass')){
						var rows = res.listclass.filter(function (e) { return e.parent_id == 0; });
						var shtml = "";
						for (var i = 0; i < rows.length; i++) {
							var pro = rows[i];
							shtml += '<tr class="course-classes-tr-'+courseid+'"><td></td>';
							shtml += '<td>&nbsp;&nbsp;'+pro['class_sort']+'. '+pro['class_title']+'</td>';
							shtml += '<td></td><td></td>';
							shtml += '<td><button class="layui-btn layui-btn-mini layui-btn-primary sel-btn" course-id="'+courseid+'" classes-id="'+pro['class_id']+'" course-name="'+coursename+'" classes-name="'+pro['class_title']+'">选择</button></td>';
							shtml += '</tr>';
						}
						$('#tr_course_' + courseid).after(shtml);
					}
				});
			})
			// 班级下拉框时间
			form.on('select(class_id)', function(data){
				// 初始化课程表
				initCourseTable();
				// 获取当前班级课程表
				getCoursePlanList();
				form.render('select');
			});
			// get page data
			function getCoursePlanList(){
				// 获取page
				var surl = "/api/eduorg/plancourse/getPlan?class_id=" + $('#class_id').val() + "&start=" + $('#start_date').val() + "&end=" + $('#end_date').val() + "&initno=" + initno;
				sendPost(surl, null, function(res){
					//console.log(res);
					// 首次加载，重新渲染分页
					if (initno == 0 && res.hasOwnProperty("listclass")) {
						bindSelectJSONProps("class_id", res, "listclass", "class_name", "class_id", res.cur_classid);
						form.render('select');
					}
					
					if (res.hasOwnProperty('liststplan')){
						for (var i = 0; i < res.liststplan.length; i++) {
							var pro = res.liststplan[i];
							$('td[data-sort="'+pro['plan_sort']+'"][data-time="'+formatDate(new Date(pro['course_date']),'yyyy-MM-dd')+'"]').html('【'+pro['course_name']+'】'+formatNullValue(pro['class_title']));
						}
					}
					initno++;
				});
			}
			
			//console.log(new Date().getMonth()+1);
			selweek_init();
			initCourseTable();
			getCoursePlanList();
		});

		
		</script>
	</body>

#end